<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${pageTitle}</title>


<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="resources/css/demo.css" />
<link rel="stylesheet" type="text/css"
	href="resources/css/login-reg-style.css" />
<link rel="stylesheet" type="text/css"
	href="resources/css/animate-custom.css" />

<!--SCRIPTS-->
<script src="resources/js/jquery.1.9.js"></script>
<script src="resources/js/jquery.showLoading.js"></script>
<script src="resources/js/jquery.showLoading.min.js"></script>

<script>
	$(function() {

		$("#j_submitLogin").click(function() {

			if (!$("form")[0].checkValidity()) {
				return true;
			}

			//jQuery('#wrapper').showLoading();
			$.ajax({

				type : 'POST',
				url : 'j_spring_security_check',
				data : $('#loginForm').serialize(),
				success : function(response) {

					window.location.replace(response)

					//	jQuery('#wrapper').hideLoading();
				},
				failure : function(reason) {
					alert("Err");
					//		jQuery('#wrapper').hideLoading();
				}
			});
			return false;
		});
	});
</script>


</head>
<body>
	<div class="container">

		<header>
		<h1>
			Login and Registration Form <span>with HTML5 and CSS3</span>
		</h1>

		</header>
		<section>
		<div id="container_demo">

			<div id="wrapper">
				<div id="login" class="animate form">
					<form autocomplete="on" method="POST" id="loginForm" action="">
						<h1>Log in</h1>
						<p>
							<label for="email" class="uname" data-icon="u"> Email </label> <input
								id="j_username" name="j_username" required="required"
								type="email" type="text" placeholder="email@example.com" />
						</p>
						<p>
							<label for="password" class="youpasswd" data-icon="p">
								Password </label> <input id="j_password" name="j_password"
								required="required" type="password" placeholder="eg. X8df!90EO" />
						</p>
						<p class="keeplogin">
							<input type="checkbox" name="loginkeeping" id="loginkeeping"
								value="loginkeeping" /> <label for="loginkeeping">Keep
								me logged in</label>
						</p>
						<p class="login button">
							<input type="submit" value="Login" id="j_submitLogin" />
						</p>
						<p class="change_link">
							Not register yet ? <a href="register.html" class="to_register">Register
								now</a>
						</p>
					</form>
				</div>
			</div>
		</div>
		</section>
	</div>
</body>
</html>